<template>
    <div>
        <div class="zone">
            
           
                
                <div class="nav">
                    <div class="nav-center">
                       <div class="nav-table">
                       <div class="nav-box">
                        <div class="table">
                            <a href="#1">
                            <img src="../assets/img/zone/a93b7d402c6b4f4399d7aa2d3f75668e.png" alt="">
                            </a>
                        </div>
                         <div class="table">
                            <a href="#2">
                                <img src="../assets/img/zone/f4dcb6e49a48f4c2df58c82ad41cd12e.png" alt="">
                            </a>
                        </div>
                         <div class="table">
                            <a href="#3">
                                <img src="../assets/img/zone/72d9f57323a18656c191b4a42dab0442.png" alt="">
                            </a>
                        </div>
                         <div class="table">
                            <a href="#4">
                                <img src="../assets/img/zone/6a165b7061ea195682ff6baf5c9b718c.png" alt="">
                            </a>
                        </div>
                    </div> 
                    </div> 
                    </div>
                    
                    
                </div>
                 <div class="center">
                <div class="company-box">
                    <div class="company-tit" >
                        <img src="../assets/img/zone/a1907c3d726dae1cc53db38d0659771c.png" alt="">
                    </div>
                    <div class="logos"  id="1">
                        <router-link to="/zone/activitycard" >
                            <span>
                            <img src="../assets/img/zone/f_37.jpg" alt="">

                            </span>
                            <span>浙江大学</span>
                        </router-link>
                         <router-link to="/activitycard">
                            <span>
                            <img src="../assets/img/zone/shlo.png" alt="">

                            </span>
                            <span>上海第一生化</span>
                         </router-link>
                         <a href="">
                            <span>
                            <img src="../assets/img/zone/quan.png" alt="">

                            </span>
                            <span>海淀区教育工会</span>
                        </a>
                         <a href="">
                            <span>
                            <img src="../assets/img/zone/santian.jpg" alt="">

                            </span>
                            <span>月饼兑换</span>
                        </a>
                        <a href="">
                            <span>
                            <img src="../assets/img/zone/63636f23513fd1ee599ff888407810d9.png" alt="">

                            </span>
                            <span>东方财富</span>
                        </a>
                        <a href="">
                       
                                <span>
                                     <i></i>
                                     <i></i>
                                     <i></i>
                                 </span>
                                <span>其他机构</span>
                      
                        </a>
                    </div>
                </div>
                <div class="tips-box" id="2">
                    <div class="tips-tit" >
                        <img src="../assets/img/zone/fdb877011cc47c565b1d1d9250af449c.png" alt="">
                    </div>
                    <div class="fqa">
                        <span>查看用户常见FAQ >></span>
                    </div>
                    <div class="cards" >
                        <div  class="card-type" @click="toClose">
                            <img src="../assets/img/zone/enjoy.png" alt="">
                            <img src="../assets/img/zone/2dbc273fa47da2dceab66e94e52c9f0b.png" alt="">
                    </div>
                    </div>
                    <div class="cards">
                        <div class="card-type type-vip" @click="toClose">
                            <img src="../assets/img/zone/gift-card.png" alt="">
                            <img src="../assets/img/zone/0c19d00dfc14e167589b621962625557.png" alt="">
                        </div>
                        <div  class="card-type type-recharge" @click="toClose">
                            <img src="../assets/img/zone/stored-value.png" alt="">
                            <img src="../assets/img/zone/9f340d5a6582d749c14f0b9373913b84.png" alt="">
                        </div>
                    </div>

                </div>
                <div class="diy-box" id="3">
                    <div class="diy-tit" >
                        <img src="../assets/img/zone/d3c59df1e0f84c6fcd2ec7020c930966.png" alt="">
                    </div>
                    <div class="subtitle">
                        <a href="">去定制>></a>
                    </div>
                    <div class="diy-img">
                        <a href="">
                            <img src="../assets/img/zone/f38c4dea796195a9ca46f85c1a1858b2.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="city-box" id="4">
                    <div class="city-tit">
                        <a href="">
                            <img src="../assets/img/zone/ways-1.png" alt="">
                        </a>
                    </div>
                    <div class="city-select">
                        <div class="phone">
                            <span>联系电话: </span>
                            <span>021-54259599</span>
                        </div>
                        <div class="email">
                            <span>联系邮箱：</span>
                            <span>qiye@21cake.com</span>
                        </div>
                    </div>
                </div>
                <div class="enter-box">
                    <hr>
                </div>
                <div class="contact-box">
                    <div class="contact-tit">
                        <a href="">
                            <img src="../assets/img/zone/318bf8c7c631e61c2533a52138ad7067.png" alt="">
                        </a>
                    </div>
                    <div class="message">
                        <ul>
                            <li>
                                <div class="size" @click="isShow">
                                    <div class="anim" >
                                       <span>已选择城市:</span>
                                    <span class="item">{{city}}</span>
                                    <div v-show="shopshow" class="disabled ">
                                        <span @click="taganim(item)"
                                         v-for="(item,index) in anim" :key="index">
                                            {{item}}
                                        </span>
                                    </div>
                                    </div>
                                    
                                    <span class="city"></span>
                                </div>
                                
                            </li>
                            <li>
                                <input type="text" placeholder="公司名称(必填)">
                            </li>
                            <li>
                                <input type="text" placeholder="联系人(必填)">
                            </li>
                            <li>
                                <input type="text" placeholder="手机号(必填)">
                            </li>
                            <li>
                                <input type="text" placeholder="邮箱">
                            </li>
                            <li>
                                <textarea name="" id="" cols="30" rows="10"
                                placeholder="留言(必填)"
                                ></textarea>
                            </li>
                        </ul>
                    </div>
                    <div class="card-process" v-show="todoClose">
                        <div class="card-content">
                            <div class="card-title">代金卡-使用流程</div>
                            <div class="card-list">
                                <ul>
                                    <li >
                                        <img v-show="now==0" src="../assets/img/zone/enjoy-01.png" alt="">
                                    </li >
                                    <li >
                                        <img v-show="now==1" src="../assets/img/zone/enjoy-02.png" alt="">
                                    </li >
                                    <li >
                                        <img v-show="now==2" src="../assets/img/zone/gift-03.png" alt="">
                                    </li >
                                    <li >
                                        <img v-show="now==3" src="../assets/img/zone/gift-04.png" alt="">
                                    </li >
                                    <li >
                                        <img v-show="now==4" src="../assets/img/zone/enjoy-06.png" alt="">
                                    </li >
                                </ul>
                                <a @click="now==0 ? '' : now--"  
                                :class="now == 0 ? '' : 'active'"></a>
                                <a @click="now==4 ? '' : now++" :class="now==4 ? '' : 'active'"></a>
                            </div>
                            <ul class="card-text">
                                <li v-show="now==0">Step1 - 登录/注册“21cake”</li>
                                <li v-show="now==1">Step2 - 选择蛋糕进入购物车结算</li>
                                <li v-show="now==2">Step3 - 点击“使用代金卡”并添加</li>
                                <li v-show="now==3">Step4 - 输入代金卡卡号密码，“添加”成功后点击“使用”</li>
                                <li v-show="now==4">Step5 - 完成订购</li>
                            </ul>
                            <i @click="toClose"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
       data() {
        
        return {
            now:0,
            shopshow:false,
            todoClose:false,
            city:'上海',
            anim: ['上海','北京','天津','杭州','无锡','苏州','广州','深圳']
        }
       },
       methods: {
        //判断城市列表是否打开  false-->关闭  true -->打开
        isShow() {
           this.shopshow =  !this.shopshow

        },
        //点击城市列表-->更换城市
        taganim(item){
           // console.log(item);
            this.city = item
        },
        ///判断礼品卡片是否关闭卡片  true--> 打开  false-->关闭
        toClose(){
          //  console.log(this.todoClose);
            this.todoClose =  !this.todoClose
          if(this.todoClose == false){
            this.now = 0
          }
        }
       },
       
    }
</script>

<style lang="scss" scoped>
.zone{
    font-family: 'PingFang SC','Heiti SC','微软雅黑',Helvetica,Arial;
    font-size: 12px;
    color: #684029;
    user-select: none;
    cursor: pointer;
}
*{
    padding: 0;
    margin: 0;  
}
ul{
    list-style: none;
}


.nav{
    padding: 77.5px 0;
    margin-bottom: -55px;
    background: url('../assets/img/zone/download.png') center center no-repeat;
    width: 100vw;
}

.nav .nav-center{
    width: 880;
    margin: 20px auto;
}
.nav .nav-center .nav-table{
    width: 100%;
    text-align: center;
}
.nav .nav-table .nav-box{
    display: flex;
    justify-content: space-between;
}
.nav .nav-table .nav-box .table{
    width: 220px;
    height: 95px;
}
.nav .nav-table .nav-box .table a{
    display: inline-block;
    width: 133px;
    height: 95px;
    line-height: 95px;
    border-radius: 4px;
    background-color: rgba(128,101,84,0.1);
}
.nav .nav-table .nav-box .table a:hover{
     background-color: rgba(128,101,84,0.2);
}
.nav .nav-table .nav-box .table a img{
   vertical-align: middle;
}
.center{
    width: 880px;
    margin: 0 auto;
}
.company-box{
    margin: 20px 0;
    text-align: center;
}
.company-box .company-tit{
    padding-top: 100px;
}
.company-box .logos{
    margin-top: 28px;
    display: inline-block;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.company-box .logos a{
    display: inline-block;
    height: 160px;
    margin: 20px 30px;
    text-align: center;
    font-size: 14px;
    color: #74372e;
    display: flex;
    flex-direction: column;
}
.company-box .logos a span:first-child{
    margin: 0 auto 10px;
    display: block;
    background-color: #faf8f7;
    border-radius: 100px;
    overflow: hidden;
}
.company-box .logos a span:first-child img{
    max-height: 123px;
    display: block;
}
.company-box .logos a:last-child span:first-child{
    width: 120px;
    height: 120px;
}
.company-box .logos a i{
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background-color: #73472e;
    margin: auto 4px;
    line-height: 120px;
    margin-top: 55px;
}
.tips-box{
    margin: 0 auto 50px;
    text-align: center;
}
.tips-box .tips-tit{
    padding-top: 100px;
}
.tips-box .fqa{
    margin: 0 0 30px;
}
.tips-box .fqa span{
    display: inline-block;
    color: #bb9772;
    font-size: 13px;
    padding-left: 30px;
    background: url('../assets/img/zone/fqa.png') no-repeat center left;
    line-height: 25px;
    text-align: center;
} 
.tips-box .cards{
    text-align: center;
}
.tips-box .cards .card-type{
    width: 486px;
    text-align: center;
    display: inline-block;
}
.tips-box .cards .card-type img:first-child{
    display: block;
    width: 100%;
}
.tips-box .cards .type-vip{
    width: 316px;
    margin-right: 50px;
}
.tips-box .cards .type-recharge{
    width: 438px;
}
.diy-box{
    margin: 20px 0 30px;
}
.diy-box .diy-tit{
    padding-top: 100px;
    text-align: center;

}
.diy-box .subtitle{
    width: 682px;
    margin: 17px auto 0;
    line-height: 2.5em;
    text-align: right;
}
.diy-box .subtitle a{
    color: #bb9772;
    font-size: 12px;
}
.diy-box .diy-img{
    text-align: center;
}
.city-box{
    text-align: center;
}
.city-box .city-tit{
    padding-top: 100px;
}
.city-box .city-select{
    padding-top: 50px;
}
.city-box .city-select span{
    font-size: 14px;
    color: #73472e;
    line-height: 30px;
}
.enter-box{
    width: 880px;
    margin: 20px auto;
}
.enter-box hr {
    border-top: 1px #A68A7A dashed;
    margin-top: 120px;
}
.contact-box{
    margin-bottom: 130px;
}
.contact-box .contact-tit{
    padding-top: 100px;
    text-align: center;
}
.contact-box .message{
    position: relative;
}
.contact-box .message ul{
    width: 504px;
    margin: 20px auto 0;
}
.contact-box .message ul li{
    margin-top: 15px;
}
.contact-box .message ul li input{
    width: 492px;
    border: 1px solid #aa8f80;
    padding-left: 10px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    outline: none;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color: #c9c9c9;
}
textarea{
    width: 482px;
    border: 1px solid #aa8f80;
    padding: 5px 10px;
    line-height: 18px;
    font-size: 14px;
    height: 95px;
    outline: none;
    resize: none;
}
 .contact-box .message ul li .size{
    
    width: 488px ;
    border: 1px solid #aa8f80 ;
    padding-left: 10px ;
    height: 34px;
    line-height: 34px;
    text-align: left;
    font-size: 14px;
    display: block;
    padding-right: 5px;
    border: 1px solid #73472E;
    color: #73472E;
    display: flex;
    justify-content: space-between;
    position: relative;
}
 .contact-box .message ul li .size .anim .item{
    margin-left:10px ;
 }

 .contact-box .message ul li .city {
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url('../assets/img/zone/triang.png') no-repeat;
    background-position: 0 10px;
    background-size: 10px;
}
 .contact-box .message ul li .disabled{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top:36px;
    right: -7px;
    width: 515px;
    max-height: 250px;
    background-color: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 10px;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
 }
  .contact-box .message ul li .disabled>span{
    vertical-align: baseline;
    margin: 0 auto;
    padding: 10px 0;
    width: 100px;
    height: 25px;
  }
  .contact-box .message ul li .disabled>span:hover{
    background-color: rgba(128,101,84,0.2);
  }
  .card-process{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(115,115,115,0.7);
  }
    .card-process .card-content{
        background-color: #fff;
        height: 520px;
        width: 840px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .card-process .card-content .card-title{
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        margin: 25px 0;
    }
    .card-process .card-content i{
        position: absolute;
        top: 10px;
        right: 10px;
        display: block;
        height: 18px;
        width: 18px;
        background: url('../assets/img/zone/del.png') no-repeat;
    }
    .card-process .card-content .card-list{
        width: 716px;
        height: 322px;
        margin: 0 auto;
        position: relative;
    }
     .card-process .card-content .card-list>ul{
        width: 602px;
        height: 320px;
        margin: 0 auto;
        border: 1px solid #d5d5d5;
     }
     .card-process .card-content .card-list>a{
        display: block;
        width: 20px;
        height: 34px;
        position: absolute;
        top: 150px;
     }
     .card-process .card-content .card-list>a:nth-child(2){
        background: url('../assets/img/zone/left.png');
        left: 0;
     }
     .card-process .card-content .card-list>a:nth-child(2).active{
        background: url('../assets/img/zone/left-active.png');
        left: 0;
     }
     .card-process .card-content .card-list>:nth-child(3){
        background: url('../assets/img/zone/right.png');
        right: 0;
     }
     .card-process .card-content .card-list>a:nth-child(3).active{
        background: url('../assets/img/zone/right-active.png');
        right: 0;
     }
     .card-process .card-content .card-text{
        height: 104px;
        width: 100%;
     }
     .card-process .card-content .card-text>li{
        font-size: 14px;
        color: #73472E;
        text-align: center;
        margin: 42px 0;
        line-height: 20px;
     }
</style>